<template>
	<!-- 仓储通首页 -->
	<view class="layout">
		<!-- 顶部 -->
		<topheader></topheader>
		<!-- 内容区域 -->
		<view class="main">
			<view class="main-left  u-relative">
				<view class="bg-title">仓储情况预览</view>
				<!-- 区域 -->
				<view class="area area_nm">
					<view>内蒙区域</view>
					<view>敬请期待</view>
				</view>
				<view class="area area_tr">
					<view>天荣厂区</view>
					<view>面积</view>
					<view>原料</view>
					<view>产成品</view>
				</view>
				<view class="area area_gk">
					<view>港口</view>
					<view>面积</view>
					<view>原料</view>
				</view>
			</view>
			<view class="main-right">
				<view class="echartDiv u-relative">
					<view class="bg-title">原料资金占用</view>
					<sel class="common-sel" :list="selectArrA" @confirm="confirmA"></sel>
					<view class="">
						<au-chartPie :chartPieData="this.chartPieDataA" @chartItemClick="chartItemClick">
						</au-chartPie>
					</view>
					<view class="echart-tip">注意：价格为最近一期月末平均价</view>
				</view>
				<view class="echartDiv u-relative">
					<view class="bg-title">产成品资金占用</view>
					<sel class="common-sel" :list="selectArrB" @confirm="confirmB"></sel>
					<view style="margin-top: 40rpx;">
						<au-chartPie :chartPieData="this.chartPieDataB" @chartItemClick="chartItemClick">
						</au-chartPie>
					</view>
					<view class="echart-tip">注意：价格为最近一期月末平均价</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<footermenu></footermenu>
	</view>
</template>

<script>
	import sel from './components/select.vue';
	import topheader from './components/topheader.vue';
	import footermenu from './components/footermenu.vue';
	export default {
		components: {
			topheader,
			footermenu,
			sel
		},
		data() {
			return {
				show: true,
				selectArrA: [{
						value: '1',
						label: '资金'
					},
					{
						value: '2',
						label: '库存'
					}
				],
				selectArrB: [{
						value: '1',
						label: '资金1'
					},
					{
						value: '2',
						label: '库存1'
					}
				],
				chartPieDataA: {},
				chartPieDataB: {
				}
			};
		},
		mounted() {
			this.initPieAjax()
		},
		methods: {
			confirmA(e) {
				console.log("原料资金占用", e)
			},
			confirmB(e) {
				console.log("产成品资金", e)
			},
			// 初始化饼图
			initPieAjax() {
				let data = [{
						value: 1048,
						name: '矿'
					},
					{
						value: 735,
						name: '煤'
					},
					{
						value: 580,
						name: '焦'
					},
					{
						value: 484,
						name: '废钢'
					},
					{
						value: 300,
						name: '合金'
					}
				]
				let testA = {
					id: 'ylzj',	//原料资金
					option: {
						//图表title
						title: {
							text: '',
							subtext: '单位:万元',
							left: 'left'
						},
						//饼图各块的颜色
						color: ['#4FA0FF', '#5FCB6D', '#EA6479', '#F6D203', '#9561E9', '#CB5FB9', '#695FCB', '#CB8A5F',
							'#0672BF'
						],
						tooltip: {
							trigger: 'axis'
						},
						//图例
						legend: {
							//图例数据
							data: [],
							//是否显示图例
							show: false,
							x: 'center',
							bottom: '5%',
							itemWidth: 10,
							itemHeight: 8,
							textStyle: { //图例文字的样式
								color: '#999',
								fontSize: 10
							},
						},
						//整个图表区域
						grid: {
							top: '1%',
							left: '3%',
							right: '4%',
							bottom: '0',
							containLabel: true
						},
						//图表数据
						series: [{
							name: '饼图',
							type: 'pie',
							radius: '50%',
							//标示线
							labelLine: {
								normal: {
									length: 8, // 改变标示线的长度
									lineStyle: {
										color: "#999" // 改变标示线的颜色
									}
								},
							},
							//各块文字说明
							label: {
								color: '#999',
								minMargin: 8,
								edgeDistance: 10,
								lineHeight: 15,
							},
							//饼图各组数据
							data: [{
									value: 1048,
									name: '矿'
								},
								{
									value: 735,
									name: '煤'
								},
								{
									value: 580,
									name: '焦'
								},
								{
									value: 484,
									name: '废钢'
								},
								{
									value: 300,
									name: '合金'
								}
							],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					}
				}
				let testB={
						id: 'ccp',	//产成品
						option: {
							//图表title
							title: {
								text: '',
								subtext: '单位:万元',
								left: 'left'
							},
							//饼图各块的颜色
							color: ['#4FA0FF', '#5FCB6D', '#EA6479', '#F6D203', '#9561E9', '#CB5FB9', '#695FCB', '#CB8A5F',
								'#0672BF'
							],
							tooltip: {
								trigger: 'axis'
							},
							//图例
							legend: {
								//图例数据
								data: [],
								//是否显示图例
								show: false,
								x: 'center',
								bottom: '5%',
								itemWidth: 10,
								itemHeight: 8,
								textStyle: { //图例文字的样式
									color: '#999',
									fontSize: 10
								},
							},
							//整个图表区域
							grid: {
								top: '1%',
								left: '3%',
								right: '4%',
								bottom: '0',
								containLabel: true
							},
							//图表数据
							series: [{
								name: '饼图',
								type: 'pie',
								radius: '50%',
								//标示线
								labelLine: {
									normal: {
										length: 8, // 改变标示线的长度
										lineStyle: {
											color: "#999" // 改变标示线的颜色
										}
									},
								},
								//各块文字说明
								label: {
									color: '#999',
									minMargin: 8,
									edgeDistance: 10,
									lineHeight: 15,
								},
								//饼图各组数据
								data: [{
										value: 1048,
										name: '棒材'
									},
									{
										value: 735,
										name: '线材'
									},
									{
										value: 580,
										name: '带钢'
									}
								],
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}],
						}
				}
				this.chartPieDataA = testA;
				this.chartPieDataB = testB;
			}
		}
	}
</script>

<style lang="scss">
	.layout {
		height: 100%;

		// background: #030c20;
		.main {
			box-sizing: border-box;
			width: 100%;
			border: 1px solid yellow;
			height: calc(100vh - 140px);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

			.bg-title {
				text-align: center;
			}

			.red_font {
				color: red;
			}

			.main-left {
				width: 64%;
				border: 1px solid red;
				height: 100%;

				.area {
					position: absolute;
					width: 300rpx;
					height: 400rpx;
					border: 1px solid blue;
					padding: 6rpx;
				}

				.area_nm {
					left: 10%;
					bottom: 30%;
				}

				.area_tr {
					left: 38%;
					bottom: 40%;
				}

				.area_gk {
					right: 10%;
					bottom: 35%;
				}
			}

			.main-right {
				width: 35%;
				height: 100%;
				border: 1px solid black;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.echartDiv {
					width: 100%;
					border: 1px solid red;
					padding: 0 20rpx;
					box-sizing: border-box;
					height: calc((100vh - 180px)/2);

					.common-sel {
						position: absolute;
						z-index: 111;
						right: 20rpx;
						top: 20rpx;
					}

					.echart-tip {
						position: absolute;
						bottom: 10rpx;
						color: red;
					}
				}
			}
		}
	}
</style>
